const dragscroll = (el) => {

  // el.addEventListener('touchstart', start, false);
  //
  // function start(evt) {
  //   console.log('in to touchstart')
  //   evt.preventDefault()
  //   const disY = evt.clientY; // 需要上下移动可以加
  //   // const originalScrollLeft = el.scrollLeft;
  //   const originalScrollTop = el.scrollTop; // 需要上下移动可以加
  //   const originalScrollBehavior = el.style['scroll-behavior'];
  //   const originalPointerEvents = el.style['pointer-events'];
  //   el.style['scroll-behavior'] = 'auto';
  //
  //   el.addEventListener('touchmove', move, false);
  //
  //   function move(evt1) {
  //     console.log('in to touchmove')
  //     evt1.preventDefault();
  //     // const distanceX = dv.clientX - disX;
  //     const distanceY = evt1.clientY - disY; // 需要上下移动可以加
  //     // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);   // 需要上下移动和左右移动
  //     // el.scrollTo(0, originalScrollTop - distanceY);   // 需要上下移动和左右移动
  //     // el.scrollTo(originalScrollLeft - distanceX, 0); // 不需要上下拖拽，y轴值为0
  //     el.scrollTop = (originalScrollTop - distanceY);
  //     console.log(el)
  //     console.log(el.scrollTop)
  //     console.log(originalScrollTop - distanceY)
  //   }
  //
  //   el.addEventListener('touchcancel', cancel, false);
  //
  //   function cancel() {
  //     console.log('in to touchcancel')
  //
  //
  //     el.removeEventListener('touchcancel')
  //     el.removeEventListener('touchmove')
  //     el.style['scroll-behavior'] = originalScrollBehavior;
  //     el.style['pointer-events'] = originalPointerEvents;
  //   }
  //
  // }

  el.onmousedown = ev => {
    // console.log('in to onmousedown')
    const disX = ev.clientX;
    const disY = ev.clientY // 需要上下移动可以加
    // const originalScrollLeft = el.scrollLeft;
    const originalScrollTop = el.scrollTop // 需要上下移动可以加
    const originalScrollBehavior = el.style['scroll-behavior']
    const originalPointerEvents = el.style['pointer-events']
    el.style['scroll-behavior'] = 'auto'

    // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
    document.onmousemove = dv => {
      // console.log('in to onmousemove')
      dv.preventDefault()
      const distanceX = dv.clientX - disX
      const distanceY = dv.clientY - disY // 需要上下移动可以加
      // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);   // 需要上下移动和左右移动
      // el.scrollTo(0, originalScrollTop - distanceY);   // 需要上下移动和左右移动
      // el.scrollTo(originalScrollLeft - distanceX, 0); // 不需要上下拖拽，y轴值为0
      el.scrollTop = (originalScrollTop - distanceY)
      el.scrollTop = (originalScrollTop - distanceX)
      //   console.log(el.scrollTop)
    }
    document.onmouseup = () => {
      // console.log('in to onmouseup')

      document.onmousemove = null
      document.onmouseup = null
      el.style['scroll-behavior'] = originalScrollBehavior
      el.style['pointer-events'] = originalPointerEvents
    }
  }

  //
  // el.onmousedown = ev => {
  //   // console.log('in to onmousedown')
  //   // const disX = ev.clientX;
  //   const disY = ev.clientY; // 需要上下移动可以加
  //   // const originalScrollLeft = el.scrollLeft;
  //   const originalScrollTop = el.scrollTop; // 需要上下移动可以加
  //   const originalScrollBehavior = el.style['scroll-behavior'];
  //   const originalPointerEvents = el.style['pointer-events'];
  //   el.style['scroll-behavior'] = 'auto';
  //
  //
  //
  //   // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
  //   document.onmousemove = dv => {
  //     // console.log('in to onmousemove')
  //     dv.preventDefault();
  //     // const distanceX = dv.clientX - disX;
  //     const distanceY = dv.clientY - disY; // 需要上下移动可以加
  //     // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);   // 需要上下移动和左右移动
  //     // el.scrollTo(0, originalScrollTop - distanceY);   // 需要上下移动和左右移动
  //     // el.scrollTo(originalScrollLeft - distanceX, 0); // 不需要上下拖拽，y轴值为0
  //     el.scrollTop=(originalScrollTop - distanceY);
  //     // console.log(el.scrollTop)
  //   };
  //   document.onmouseup = () => {
  //     // console.log('in to onmouseup')
  //
  //     document.onmousemove = null;
  //     document.onmouseup = null;
  //     el.style['scroll-behavior'] = originalScrollBehavior;
  //     el.style['pointer-events'] = originalPointerEvents;
  //   };
  // };

}
export default dragscroll
